<template>
  <div class="container">
    <div class="header">
      <div class="header_input">
        <div class="header_input_img">
          <img src="../assets/home_05.png" alt="">
        </div>
        <input type="text" placeholder="请输入关键词搜索">
      </div>
      <div class="header_picture">
        <ul>
          <li>
            <img src="../assets/memory_01.png" alt="">
          </li>
          <li>
            <img src="../assets/memory_03.png" alt="">
          </li>
          <li>
            <img src="../assets/memory_05.png" alt="">
          </li>
          <li>
            <img src="../assets/memory_07.png" alt="">
          </li>
        </ul>
      </div>
      <div class="header_top">
        <div class="header_top_img">
          <img src="../assets/memory_top.png" alt="">
        </div>
        <p>回顶部</p>
      </div>
    </div>
    <div class="content">
      <div class="content_text">
        <p></p>
        <span>附近好店</span>
      </div>
      <div class="content_list">
        <ul>
          <li>
            <p>全部分类</p>
            <img src="../assets/memory_09.png" alt="">
          </li>
          <li>
            <p>附近</p>
            <img src="../assets/memory_09.png" alt="">
          </li>
          <li>
            <p>价格</p>
            <img src="../assets/memory_09.png" alt="">
          </li>
          <li>
            <p>筛选</p>
            <img src="../assets/memory_10.png" alt="" style="width:0.26rem;height:0.26rem;">
          </li>
        </ul>
      </div>
      <div class="content_info">
        <div class="content_info_detail">
          <div class="content_info_detail_img">
            <img src="../assets/memory_11.png" alt="">
          </div>
          <div class="content_info_message">
            <div class="content_info_message_one">
              <p>7-Eleven便利店</p>
              <span>商超</span>
            </div>
            <div class="content_info_message_two">
              <div class="content_info_star">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
              </div>
              <p>60元起</p>
              <span>5.6km</span>
            </div>
            <div class="content_info_message_three">
              <div class="content_info_message_text">超市</div>
              <div class="content_info_message_text">便利店</div>
              <div class="content_info_message_text">烟酒茶叶</div>
              <div class="content_info_message_text">口碑老店</div>
            </div>
            <div class="content_info_message_four">
              <div class="content_info_message_tet">
                open
              </div>
              <span>营业中</span>
              <p>08:00-23:59营业</p>
            </div>
          </div>
        </div>
        <div class="content_info_detail">
          <div class="content_info_detail_img">
            <img src="../assets/memory_11.png" alt="">
          </div>
          <div class="content_info_message">
            <div class="content_info_message_one">
              <p>7-Eleven便利店</p>
              <span>商超</span>
            </div>
            <div class="content_info_message_two">
              <div class="content_info_star">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
              </div>
              <p>60元起</p>
              <span>5.6km</span>
            </div>
            <div class="content_info_message_three">
              <div class="content_info_message_text">超市</div>
              <div class="content_info_message_text">便利店</div>
              <div class="content_info_message_text">烟酒茶叶</div>
              <div class="content_info_message_text">口碑老店</div>
            </div>
            <div class="content_info_message_four">
              <div class="content_info_message_tet">
                open
              </div>
              <span>营业中</span>
              <p>08:00-23:59营业</p>
            </div>
          </div>
        </div>
        <div class="content_info_detail">
          <div class="content_info_detail_img">
            <img src="../assets/memory_11.png" alt="">
          </div>
          <div class="content_info_message">
            <div class="content_info_message_one">
              <p>7-Eleven便利店</p>
              <span>商超</span>
            </div>
            <div class="content_info_message_two">
              <div class="content_info_star">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
              </div>
              <p>60元起</p>
              <span>5.6km</span>
            </div>
            <div class="content_info_message_three">
              <div class="content_info_message_text">超市</div>
              <div class="content_info_message_text">便利店</div>
              <div class="content_info_message_text">烟酒茶叶</div>
              <div class="content_info_message_text">口碑老店</div>
            </div>
            <div class="content_info_message_four">
              <div class="content_info_message_tet">
                open
              </div>
              <span>营业中</span>
              <p>08:00-23:59营业</p>
            </div>
          </div>
        </div>
        <div class="content_info_detail">
          <div class="content_info_detail_img">
            <img src="../assets/memory_11.png" alt="">
          </div>
          <div class="content_info_message">
            <div class="content_info_message_one">
              <p>7-Eleven便利店</p>
              <span>商超</span>
            </div>
            <div class="content_info_message_two">
              <div class="content_info_star">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
                <img src="../assets/memory_star.png" alt="">
              </div>
              <p>60元起</p>
              <span>5.6km</span>
            </div>
            <div class="content_info_message_three">
              <div class="content_info_message_text">超市</div>
              <div class="content_info_message_text">便利店</div>
              <div class="content_info_message_text">烟酒茶叶</div>
              <div class="content_info_message_text">口碑老店</div>
            </div>
            <div class="content_info_message_four">
              <div class="content_info_message_tet">
                open
              </div>
              <span>营业中</span>
              <p>08:00-23:59营业</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="footer">
      <ul>
        <li>
          <img src="../assets/home2.png" alt="">
          <p>首页</p>
        </li>
        <li>
          <img src="../assets/shopping2.png" alt="">
          <p>商城</p>
        </li>
        <li>
          <img src="../assets/member2.png" alt="">
          <p>会员中心</p>
        </li>
        <li>
          <img src="../assets/cart2.png" alt="">
          <p>购物车</p>
        </li>
        <li>
          <img src="../assets/user.png" alt="">
          <p style="color:#FF2669;">线下商家</p>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'Memory',
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
  html, body, .container {
    @include rect(100%, 100%); // 宽为100%, 高为100%
  }
  .container {
    @include flexbox();
    @include flex-direction(column);
    @include justify-content(space-between);
    .header {
      position: fixed;
      top: 0;
      @include rect(100%,0.88rem);
      @include padding(0 0.30rem 0);
      @include flexbox();
      @include justify-content(space-between);
      @include align-items(center);
      background: #fff;
      .header_input {
        @include rect(46%,0.7rem);
        background: #F8F8F8;
        border-radius: 0.14rem;
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        .header_input_img {
          @include rect(0.35rem,0.34rem);
          @include margin(0 0.17rem 0);
          >img {
            @include rect(100%,100%);
          }
        }
        >input {
          @include rect(100%,100%);
          border: none;
          background: #F8F8F8;
          border-radius: 0.14rem;
        }
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
          font-size: 0.28rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #B3B5B8;
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
          font-size: 0.28rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #B3B5B8;
        }
        input::-moz-placeholder, textarea::-moz-placeholder {
          font-size: 0.28rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #B3B5B8;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
          font-size: 0.28rem;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #B3B5B8;
        }
      }
      .header_picture {
        @include rect(40%,100%);
        >ul {
          @include rect(100%,100%);
          @include flexbox();
          @include justify-content(space-between);
          @include align-items(center);
          >li {
            @include rect(0.52rem,0.52rem);
            @include flexbox();
            @include justify-content(center);
            @include align-items(center);
            >img {
              @include rect(100%,100%);
            }
          }
        }
      }
      .header_top {
        @include rect(14%,50%);
        @include flexbox();
        @include flex-direction(column);
        @include justify-content(space-between);
        @include align-items(center);
        .header_top_img {
          @include rect(0.14rem,0.09rem);
          >img {
            @include rect(100%,100%);
            display: block;
          }
        }
        >p {
          font-size: 0.18rem;
          font-family: PingFang-SC-Medium;
          font-weight: bold;
          color: #191E2A;
        }
      }
    }
    .content {
      @include margin(0.9rem 0 0 0);
      @include flex();
      @include rect(100%, auto);
      @include overflow();
      @include flex-direction(column);
      @include padding(0 0.30rem 0.98rem);
      .content_text {
        @include margin(0.4rem 0 0 0);
        @include rect(100%,0.68rem);
        @include flexbox();
        @include align-items(center);
        >p {
          @include rect(0.06rem,0.24rem);
          background: #F52E67;
          @include margin(0 0.16rem 0 0);
        }
        >span {
          font-size: 0.32rem;
          font-family: PingFang-SC-Heavy;
          font-weight: 800;
          color: #191E2A;
        }
      }
      .content_list {
        @include rect(100%,0.75rem);
        >ul {
          @include rect(100%,100%);
          @include flexbox();
          @include justify-content(space-between);
          @include align-items(center);
          li {
            @include flexbox();
            @include align-items(center);
            >p {
              font-size: 0.28rem;
              font-family: PingFang-SC-Medium;
              font-weight: 500;
              color: #191E2A;
              @include margin(0 0.13rem 0 0);
            }
            img {
              @include rect(0.14rem,0.1rem);
            }
          }
        }
      }
      .content_info_detail {
        @include rect(100%,2.7rem);
        @include padding(0.3rem 0 0.36rem);
        border-top: 1px solid #EBEDF0;
        @include flexbox();
        @include justify-content(space-between);
        .content_info_detail_img {
          @include rect(1.4rem,1.4rem);
          >img {
            @include rect(100%,100%);
          }
        }
        .content_info_message {
          @include rect(80%,100%);
          @include margin(0 0 0 0.31rem);
          .content_info_message_one {
            @include flexbox();
            >p {
              font-size: 0.3rem;
              font-family: PingFang-SC-Bold;
              font-weight: bold;
              color: #191E2A;
              @include margin(0 0.37rem 0 0);
            }
            >span {
              @include flexbox();
              @include justify-content(center);
              @include align-items(center);
              @include rect(0.88rem,0.37rem);
              background: linear-gradient(-90deg,#FF6D74,#F52E67,#FF5367);
              border-radius: 0.19rem;
              font-size: 0.24rem;
              font-family: PingFang-SC-Medium;
              font-weight: 500;
              color: #fff;
            }
          }
          .content_info_message_two {
            @include flexbox();
            @include margin(0.16rem 0 0 0);
            // @include justify-content(center);
            @include align-items(center);
            .content_info_star {
              >img {
                @include rect(0.24rem,0.23rem);
              }
            }
            >p {
              @include margin(0 0.36rem);
              font-size: 0.32rem;
              font-family: PingFang-SC-Bold;
              font-weight: bold;
              color: #F52E67;
            }
            >span {
              font-size: 0.22rem;
              font-family: PingFang-SC-Heavy;
              font-weight: 800;
              color: #9FA3AE;
            }
          }
          .content_info_message_three {
            @include flexbox();
            @include margin(0.16rem 0 0 0);
            .content_info_message_text {
              @include flexbox();
              @include justify-content(center);
              @include align-items(center);
              background: #fff;
              border:1px solid #C7CAD4;
              border-radius: 0.04rem;
              @include margin(0 0.1rem 0 0);
              @include rect(1.2rem,0.5rem);
              font-size: 0.22rem;
              font-family: PingFang-SC-Medium;
              font-weight: 500;
              color: #BBBFC7;
            }
          }
          .content_info_message_four {
            @include flexbox();
            @include margin(0.14rem 0 0 0);
            .content_info_message_tet {
              text-align: center;
              @include line-height(0.4rem);
              @include rect(0.9rem,0.4rem);
              background: linear-gradient(-90deg,#FF6D74,#F52E67,#FF5367);
              border-radius: 0.04rem;
              font-size: 0.14rem;
              font-family: DIN-Medium;
              font-weight: 500;
              color: #fff;
            }
            >span {
              @include margin(0 0.2rem);
              font-size: 0.22rem;
              font-family: PingFang-SC-Medium;
              font-weight: 500;
              color: #A1A5AA;
            }
            >p {
              font-size: 0.22rem;
              font-family: PingFang-SC-Medium;
              font-weight: 500;
              color: #A1A5AA;
            }
          }
        }
      }
    }
    .footer {
      @include rect(100%,0.98rem);
      position: fixed;
      bottom: 0;
      border-top: 1px solid #E6E8EC;
      background: #fff;
      >ul {
        @include rect(100%,100%);
        @include padding(0 0.30rem 0);
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        li {
          height: 86%;
          @include flexbox();
          @include flex-direction(column);
          @include justify-content(space-around);
          @include align-items(center);
          >img {
            @include rect(0.44rem,0.44rem);
          }
          >p {
            font-size: 0.22rem;
            font-family: PingFang-SC-Regular;
            font-weight: 400;
            color: #282C35;
          }
        }
      }
    }
  }
</style>
